Fix dropdown visibility contrast issue#397
Conversation
✅ Deploy Preview for otel-ecosystem-explorer ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR aims to fix a low-contrast native <select> dropdown menu in the Java-agent telemetry/configuration UI so options are readable without requiring hover, improving overall accessibility and usability.
Changes:
- Adds a custom chevron icon and removes the native select arrow via
appearance-noneacross the affected selectors. - Updates select styling to use the app’s background/border tokens for better contrast consistency.
- Applies
bg-card/text-foregroundclasses to<option>elements in an attempt to improve dropdown menu readability.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| ecosystem-explorer/src/features/java-agent/configuration/components/controls/select-control.tsx | Updates configuration builder select styling and adds a chevron indicator. |
| ecosystem-explorer/src/features/java-agent/components/telemetry-comparison/version-selector-panel.tsx | Restyles version/condition selects and adds chevron indicators. |
| ecosystem-explorer/src/features/java-agent/components/configuration-selector.tsx | Restyles configuration selector and adds a chevron indicator. |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
| id="config-select" | ||
| value={selectedWhen} | ||
| onChange={(e) => onWhenChange(e.target.value)} | ||
| className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 min-w-0 w-full cursor-pointer appearance-none rounded-lg border-2 py-2.5 pr-10 pl-4 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark] sm:min-w-[200px]" |
| <select | ||
| id="to-version-select" | ||
| value={toVersion} | ||
| onChange={(e) => onToVersionChange(e.target.value)} | ||
| className="border-border/60 bg-background/80 text-foreground hover:border-primary/40 focus:border-primary/50 focus:ring-primary/20 w-full cursor-pointer appearance-none rounded-lg border-2 px-4 py-2.5 text-sm font-medium backdrop-blur-sm transition-all duration-200 focus:ring-2 focus:outline-none dark:[color-scheme:dark]" | ||
| > |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
jaydeluca
left a comment
jaydeluca
left a comment
There was a problem hiding this comment.
i am unable to reproduce the issue you are reporting. What browser are you using? I'm going to need to rely on you providing screenshots after each change to verify things are fixed since i cant reproduce
Also, it looks like this change makes the dropdown overflow the container:
I’m using Chrome on Windows. I’ll provide screenshots with the next update so the behavior can be verified more easily. Thanks for pointing out the dropdown overflow issue as well , I’ll investigate and fix that in the next revision. |
|
Here is the video link demonstrating both the issue before the fix and the behavior after the fix: |
|
Thank you for your contribution @hussainjamal760! 🎉 We would like to hear from you about your experience contributing to OpenTelemetry by taking a few minutes to fill out this survey. |
Issue: #396
Overview
This PR fixes a dropdown UI visibility issue where menu items were not clearly readable due to low contrast between the text and background.
The goal of this change is to improve readability, usability, and overall user experience by ensuring all dropdown options are clearly visible in their default state.
What was the issue?
The dropdown menu had a white background with text colors that blended in, making most items difficult to read unless hovered. This created a poor visual hierarchy and required unnecessary interaction just to view available options.
What has been improved?
Improved text and background contrast for better readability
Ensured all dropdown items are visible in default state (no hover required)
Enhanced visual clarity for faster scanning of options
Improved overall accessibility and user experience
User Impact
This change reduces confusion for users and improves interaction flow by making dropdown options immediately visible and easy to distinguish.
Testing
Verified dropdown visibility in default and hover states
Checked readability across multiple screen sizes
Ensured no layout or styling regressions introduced